<template>
    <view class="page">
        <view class="vedio flex-bwt-wrap">
            <!-- {{ dataList }} -->

            <template v-for="video in dataList" :key="video.id">
                <template v-if="video.videos">
                    <view class="vedioItem" v-for="item in video.videos" :key="item.id"
                        @click="goPage(`/pages/category/category?id=${item.id}&isReback=${true}`)">
                        <image style="border-radius: 40rpx" class="wh-100" :src="item.cover" mode="aspectFill">
                        </image>
                        <image class="play wh-56" src="https://cdn.oss.bon-top.cn/static_bc/images/play.png"></image>
                        <view class="card flex pd-12">
                            <view class="card_bg"></view>
                            <view class="avtor">
                                <image class="wh-56 bd-r50c" :src="item.sale_info.avatar" mode="aspectFill"></image>
                                <image class="huiyuan" v-if="item.sale_info.is_official"
                                    src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png">
                                </image>
                            </view>
                            <view class="desc ml-12 te-wid">
                                <view class="ft1 te-1 c-ff">{{ video.name }}</view>
                                <view class="ft3"><span v-for="tag in video.tags.slice(0, 2)" :key="tag.id">{{ ' #' +
                                    tag.name
                                        }}</span>
                                </view>
                            </view>
                        </view>
                    </view>
                </template>
            </template>

        </view>
        <u-loadmore :status="loadmoreList.status" :loading-text="loadmoreList.loadingText"
            :loadmore-text="loadmoreList.loadmoreText" :nomore-text="loadmoreList.nomoreText" />
    </view>
</template>
<script setup lang="js">
import { onReachBottom } from '@dcloudio/uni-app';
import { onMounted, reactive } from 'vue';
let prop = defineProps(['dataList', 'pageInfo', 'dataObj'])
let { dataList, dataObj, pageInfo } = prop
let emit = defineEmits('getVideoList')
console.log('dataList', dataList)
let loadmoreList = reactive({
    status: "loadmore",
    loadingText: "加载中~",
    loadmoreText: "加载更多",
    nomoreText: "没有更多了",
})
const goPage = (url) => {
    uni.navigateTo({ url: url })
}
onMounted(() => {
    if (!pageInfo) return
    if (pageInfo.page >= dataObj.pageInfo?.totalPage) {
        loadmoreList.status = 'nomore'

    } else { loadmoreList.status = 'loadmore' }
})
onReachBottom(() => {
    console.log('触底')
    if (!pageInfo) return
    if (pageInfo.page >= dataObj.pageInfo?.totalPage) {
        loadmoreList.status = 'nomore'
        console.log("我没了")
    } else {
        loadmoreList.status = 'loading'
        pageInfo.page++
        setTimeout(() => {
            emit('getVideoList')
            loadmoreList.status = 'loadmore'

        }, 500)
    }
})
const goProjectDetail = (id) => {
    uni.navigateTo({
        url: `/subpackage/immigration/immigration?id=${id}`,
    });
};
</script>
<style lang="scss" scoped>
.vedio {
    padding: 0 30rpx;

    .vedioItem {
        width: 334rpx;
        height: 614rpx;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        //border: 1rpx solid red;
        margin-bottom: 16rpx;
        position: relative;

        .play {
            position: absolute;
            top: 297rpx;
            left: 147rpx;
            z-index: 3;
        }

        .card {
            width: 314rpx;
            height: 82rpx;
            border-radius: 44rpx 44rpx 44rpx 44rpx;
            position: absolute;
            bottom: 10rpx;
            left: 10rpx;
            z-index: 10;
            overflow: hidden;

            .card_bg {
                width: 314rpx;
                height: 82rpx;
                position: absolute;
                z-index: -1;
                top: 0;
                left: 0;
                // background: #fff;
                background-color: rgba(255, 255, 255, 0.6);
                // opacity: 0.7;
                // filter: blur(30rpx);
                backdrop-filter: blur(30rpx);

            }

            .avtor {
                width: 56rpx;
                height: 56rpx;
            }

            .huiyuan {
                width: 22rpx;
                height: 20rpx;
                position: absolute;
                bottom: 10rpx;
                left: 44rpx;
                z-index: 12;
            }
        }
    }
}
</style>